<template>
  <div class="custom-form">
    <div class="bg-img">
      <div class="form-header">
        <div>没有喜欢的路线?</div>
        <div>你只需要决定出发</div>
        <div>剩下的交给景缘游行就好</div>
      </div>
      <div class="custom-icon">
        <img src="../assets/home/step1.png" alt="" />
        <img src="../assets/home/step2.png" alt="" />
        <img src="../assets/home/step3.png" alt="" />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="custom.phone"
          name="手机号"
          placeholder="请填写手机号"
          :rules="[{ required: true, message: '请填写正确的手机号', pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ }]"
        />
        <van-field
          v-model="custom.destination"
          name="目的地"
          placeholder="请填写目的地"
          :rules="[{ required: true, message: '请填写正确的目的地(地名)', pattern: /^[\u4e00-\u9fa5]{2,}$/ }]"
        />
        <van-field
          v-model="custom.demand"
          type="textarea"
          name="需求"
          placeholder="请填写您的旅行需求"
          :rules="[{ required: true, message: '旅行需求不能为空' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交需求</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
// 引入订制旅行API
import { customOrder } from '../server/order';

export default {
  data() {
    return {
      // 从浏览器缓存中获取用户信息
      token: localStorage.getItem('token'),
      // 订制旅行填写信息
      custom: { phone: '', destination: '', demand: '' },
    };
  },
  methods: {
    // 提交订制表单
    onSubmit() {
      if (this.token == null) {
        // 如果用户未登录
        this.$toast.fail('未登录,即将为您跳转登录页面');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      } else {
        // 否则,用户已登录
        customOrder(this.token, this.custom)
          .then(() => {
            this.$toast.success('提交成功,客服将在24小时内与您联系');
            this.custom.phone = '';
            this.custom.destination = '';
            this.custom.demand = '';
          })
          .catch(() => {
            this.$toast.fail('提交失败,请稍后重试');
          });
      }
    },
  },
};
</script>
<style lang="scss">
// 订制表单
.custom-form {
  height: 700px;
  overflow: hidden;
  margin-bottom: 0;
  background: url(../assets/home/beijing.jpg);
  background-size: cover;
  background-position: 50% 50%;

  .bg-img {
    width: 85%;
    height: 520px;
    margin: 48px auto;
    padding: 29px 16px 12px;
    background-color: #f9f9f6;

    // 标题
    .form-header {
      margin-bottom: 20px;

      & > div:nth-child(1),
      & > div:nth-child(2) {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0;
        color: #544641;
      }

      & > div:nth-child(3) {
        height: 14px;
        margin-top: 5px;
        opacity: 0.8;
        font-weight: 500;
        font-size: 14px;
        line-height: 25px;
        letter-spacing: 0;
        color: #544641;
      }
    }

    // icon
    .custom-icon {
      margin-top: 16px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;

      & > img {
        width: 64px;
        display: block;
      }
    }

    // 表单
    .van-field {
      margin: 10px 0 25px;
      border-radius: 4px;
      border: 1px solid #ebeae4;
      padding: 6px 30px 6px 6px;

      .van-field__error-message {
        padding-left: 16px;
      }

      .van-field__control {
        border: 1px solid #fff;
        border-radius: 5px;
        background-color: #fff;
        color: #918682;
        font-size: 14px;
        text-indent: 14px;
      }
    }

    .custom-button,
    .van-button {
      width: 100%;
      margin: 24px auto;
      border: none;
      width: 100%;
      height: 48px;
      border-radius: 24px;
      background-color: #5fc6c2;

      .van-button__text {
        color: #fff;
        font-size: 16px;
      }
    }
  }
}
</style>
